<template>
  <!-- {
    "problem":{
        "title":"题目",
        "type":1,
        "expend":["type=1 -> 选择题的选项,否则图片"]
    }，
    "answer::{
        "answer":"学生答案",
        "score":"得分",
        "result":"0 正确 1 错误"
    },
    "problemProperty":{
        "chapter":"章节",
        "falliblePoint":"易错点",
        "answer":"答案",
        "explanation":"答案解析",
        "wrongRate":"出错率"
    },
    "knowledge":{
        "title":"知识点"，
        "remark":"备注，应该没啥用"
    }
} -->
  <div v-loading="formLoading" style="line-height: 1.8">
    <h3>第 {{ index }} 题</h3>
    <div>
      <div class="q-result">
        <div class="q-title" v-html="'题目：'+answer.problem.title" />
      </div>
      <div class="q-answer">
        <div v-html="'学生答案：' + answer.answer.answer" />
        <div v-html="'分数：' + answer.answer.score" />
        <div v-html="'是否正确（0 正确 1 错误）：' + answer.answer.result" />
      </div>
      <div class="q-explanation">
        <div v-html="'章节：' + answer.problemProperty.chapter" />
        <div v-html="'易错点：' + answer.problemProperty.falliblePoint" />
        <div v-html="'答案：' + answer.problemProperty.answer" />
        <div v-html="'答案解析：' + answer.problemProperty.explanation" />
        <div v-html="'出错率：' + answer.problemProperty.wrongRate" />
      </div>
    </div>
    <!-- <el-row class="do-align-center"
      ><el-input-number
        v-model="answer.score"
        :min="0"
        label="分数"
      ></el-input-number
      ><span> | </span
      ><el-button type="primary" @click="submitScore">提交评分</el-button>
    </el-row> -->
  </div>
</template>

<script>
import {
  attendExam,
  commitPractice,
  markAnswer,
  getExams,
  finishExam,
  getScores,
  getAnswers,
  getScore,
} from "@/api/exam";
export default {
  name: "QuestionShow",
  props: {
    answer: {
      type: Object,
      default: function () {
        return { id: null, result: "", completed: false };
      },
    },
    index: {
      type: Number,
      default: 0,
    },
    formLoading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    submitScore() {
      if (
        answer.id &&
        answer.score &&
        parseInt(answer.id) !== 0 &&
        parseInt(answer.score) >= 0
      ) {
        _this.formLoading = true;
        markAnswer({ id: answer.id, score: answer.score })
          .then((res) => {
            console.log("res", res);
            // if (!res.records) {
            //   _this.$alert("id错误", {
            //     confirmButtonText: "返回首页",
            //     callback: (action) => {
            //       _this.$router.push("/paper");
            //     },
            //   });
            // } else {
            //   _this.form.records = res.records;
            _this.formLoading = false;
            // }
          })
          .catch((e) => {
            _this.$message.error("出现未知错误");
          });
      } else {
        _this.$message.error("id错误");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.q-result,
.q-answer,
.q-explanation {
  background-color: #ebeb93;
  padding: 10px;
  border-radius: 20px;
  text-indent: 10px;
  margin-bottom: 10px;
}
.q-answer {
  background-color: #97eb93;
}
.q-explanation {
  background-color: #93c9eb;
}
</style>
